<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>live2d管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.7/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/layer-v3.5.1/layer/theme/default/layer.css" media="all">
    <link rel="stylesheet" href="../lib/live2d/css/live2d.css" media="all">
    <style>
        [v-cloak] {
            display: none !important;
        }

        .avatar_image {
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            text-align: center;
            color: #3d4450;
            max-width: 100%;
            vertical-align: middle;
            border: 0;
            overflow: hidden;
            font-size: 12px;
            height: 150px;
            width: 150px;
            display: block;
            transition: transform .3s;
            margin: 2px auto 2px;
        }

        #pagination {
            word-break: break-all;
            word-wrap: break-word;
            overflow: visible;
        }

        .pagination__item {
            text-align: center;
            color: #ffffff;
            background-color: rgba(114, 102, 186, 0.58)
        }

        .pagination__item--text {
            background-color: rgba(255, 255, 255, 0.8);
            color: #7266BA
        }

        .pagination__item--current {
            background-color: #6658b8
        }

        .pagination a.pagination__item:hover {
            text-decoration: none;
            background-color: #6658b8
        }
    </style>
</head>
<body>
<div id="main-content">

    <div style="padding: 8px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space4">

            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <form id="searchForm" style="padding: 8px" class="layui-form layui-form-pane" action=""
                      onsubmit="return false">

                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">模型名</label>
                            <div class="layui-input-block">
                                <input type="text" name="modelSearchKey" v-model="live2dPageQuery.searchKey"
                                       autocomplete="off" placeholder="请输入模型名" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md2" style="width: 270px">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">开始时间</label>
                                <div class="layui-input-block">
                                    <input type="text" name="startDateSelect" id="startDateSelect"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md2" style="width: 270px">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">结束时间</label>
                                <div class="layui-input-block">
                                    <input type="text" name="endDateSelect" id="endDateSelect"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md2">
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否展示</label>
                            <div class="layui-input-block">
                                <select id="showMarkSelect" name="showMarkSelect" lay-filter="showMarkSelect">
                                    <option value="-1" selected="">&nbsp;</option>
                                    <option value="0">否</option>
                                    <option value="1">是</option>
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="layui-col-md1">
                        <div class="layui-inline" style='display: flex;justify-content: space-between;'>
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn" v-on:click="searchListPage()"><i
                                    class="layui-icon"></i>
                            </button>
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-reset-btn" v-on:click="resetParam()"><i
                                    class="layui-icon layui-icon-refresh"></i>
                            </button>
                        </div>
                    </div>

                </form>
            </fieldset>

            <div class="layui-col-md3" v-for="(live2dInfo,index) in live2dInfoList" :key="index">
                <div class="layui-card">
                    <div class="layui-card-header">

                        <div class="layui-inline" style='display: flex;justify-content: space-between;'>
                            <div>
                                {{live2dInfo.modelName}}
                            </div>

                            <button type="button" class="layui-btn layui-btn-sm"
                                    style="margin-top: 5px; margin-right: -10px;"
                                    v-on:click="downloadLive2d(live2dInfo)">
                                <i class="layui-icon layui-icon-download-circle"></i>
                            </button>
                        </div>

                    </div>
                    <div class="layui-card-body" v-on:click="updateLive2d(live2dInfo)" style="cursor: pointer;">
                        <img v-bind:src="live2dInfo.modelImagePath" class="avatar_image"/>
                    </div>

                    <form class="layui-form layui-form-pane" action="" onsubmit="return false">
                        <div class="layui-inline" style='display: flex;justify-content: space-between;'>
                            <input type="checkbox" name="switch" lay-skin="switch" lay-text="展示|不展示"
                                   :checked="live2dInfo.showMark==1" disabled>

                            <button type="button" class="layui-btn layui-btn-sm" style="margin-top: 5px;"
                                    v-on:click="deleteLive2d(live2dInfo)">
                                <i class="layui-icon"></i>
                            </button>
                        </div>

                    </form>

                </div>
            </div>


            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div id="pagination" class="pagination__item pagination__item--text"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>

<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../lib/layer-v3.5.1/layer/layer.js" charset="utf-8"></script>
<script src="../lib/axios/axios.min.js"></script>
<script src="../lib/vue-module/vue.js"></script>
<script src="../js/main.js"></script>
<script src="../lib/layui-v2.5.7/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=2.0.0" charset="utf-8"></script>

<script>
    const vueObject = new Vue({
        el: "#main-content",
        data: {
            live2dInfoList: [],
            live2dPageQuery: {
                searchKey: "",
                showMark: null,
                startTime: null,
                endTime: null,
                pageNo: 1,
                pageSize: 10
            },
        },
        methods: {
            listPage() {
                return axiosPostFunction("/uploads/live2d/authApi/listPage", this.live2dPageQuery, true);
            },
            searchListPage() {
                let _that = this;
                _that.listPage().then((respData) => {
                    if (null != respData) {
                        let total = respData.total;
                        _that.live2dInfoList = respData.list;
                        /*使用layui分页*/
                        layui.use(['laypage', 'layer', 'jquery'], function () {
                            let laypage = layui.laypage;
                            let $ = layui.$
                            let layer = layui.layer;
                            //查询条件
                            laypage.render({
                                elem: 'pagination',
                                count: total /*数据总量，这里先给个初始值10，然后用layui初始化分页*/,
                                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                                limit: 10,
                                jump: function (obj, first) {
                                    /*点击非第一页页码时的处理逻辑。比如这里调用了ajax方法，异步获取分页数据*/
                                    if (!first) {
                                        let loading = layer.msg('数据加载中...', {icon: 16, shade: 0.3});
                                        _that.live2dPageQuery.pageNo = obj.curr;
                                        _that.live2dPageQuery.pageSize = obj.limit;
                                        _that.listPage().then((newRespData) => {
                                            if (null != respData) {
                                                let newTotal = newRespData.total;
                                                _that.live2dInfoList = newRespData.list;
                                                /*如果数据总量发生了变化，我们将刷新总页数*/
                                                if (newTotal != obj.count) {
                                                    obj.count = newTotal;
                                                    $(".layui-laypage-btn").click();
                                                }
                                            }
                                            layer.close(loading);
                                        });
                                    }
                                }
                            });
                        });
                    }
                });
            },
            updateLive2d(live2dInfo) {
                let id = live2dInfo.id;
                let layerIndex = layer.open({
                    title: '修改live2d',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['90%', '90%'],
                    content: './live2dUpdate.html?live2dId=' + id,
                    end: function () {
                        layer.close(layerIndex);
                        location.reload();
                    },
                });
                $(window).on("resize", function () {
                    layer.full(layerIndex);
                });
            },
            deleteLive2d(live2dInfo) {
                layer.confirm('是否删除？', {
                    title: '确认操作',
                    icon: 3,
                    btn: ['确认', '取消'],
                    skin: 'layui-layer-molv',
                    anim: 4,
                }, function () {
                    let id = live2dInfo.id;
                    axiosDeleteFunction('/uploads/live2d/authApi/delete/' + id, null, true).then((response) => {
                        layer.alert(response, {
                            icon: 1, skin: 'layui-layer-molv', closeBtn: 0, anim: 4,
                            yes: function (index, layero) {
                                /*如果设定了yes回调，需进行手工关闭*/
                                layer.close(index);
                                location.reload();
                            },
                        });
                    }).catch(function (err) {
                        console.warn(err);
                    });
                }, function () {
                    layer.msg('用户取消了删除', {icon: 7});
                });
            },
            downloadLive2d(live2dInfo) {
                let id = live2dInfo.id;
                axiosDownloadFunction('/uploads/live2d/authApi/download/' + id, true);
            },
            resetParam() {
                this.live2dPageQuery.searchKey = '';
                this.live2dPageQuery.showMark = null;
                this.live2dPageQuery.startTime = null;
                this.live2dPageQuery.endTime = null;
                layui.use('form', function () {
                    let form = layui.form;
                    /*清空是否展示的下拉框*/
                    $('#showMarkSelect').val(-1);
                    /*layDate没有清空方法只能在清空按钮中触发,
                    但是清空按钮在取消选择日期的时候会被隐藏，
                    所以只能选择将对应的form重置以达到清空日期输入框的效果
                    */
                    $('#searchForm')[0].reset();
                    /*强制layui表单刷新ui*/
                    form.render();
                });
            },
        },
        watch: {
            /*当live2dInfoList绑定的ui渲染完成时，强制layui表单刷新ui*/
            live2dInfoList: function () {
                this.$nextTick(function () {
                    layui.use('form', function () {
                        let form = layui.form;
                        form.render();
                    });
                });
            },
        },
        created() {
            this.searchListPage();
        }
    });

    layui.use(['form', 'layedit', 'laydate'], function () {
        let form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;

        laydate.render({
            elem: '#startDateSelect',
            type: 'datetime',
            done: function (value, date) {
                /*value 得到日期生成的值，如：2022-05-18 00:00:00*/
                vueObject.live2dPageQuery.startTime = value;
                /*date 得到日期时间对象：{"year": 2022,"month": 5,"date": 18,"hours": 0,"minutes": 3,"seconds": 3}*/
            }
        });

        laydate.render({
            elem: '#endDateSelect',
            type: 'datetime',
            done: function (value, date) {
                /*value 得到日期生成的值，如：2022-05-18 00:00:00*/
                vueObject.live2dPageQuery.endTime = value;
                /*date 得到日期时间对象：{"year": 2022,"month": 5,"date": 18,"hours": 0,"minutes": 3,"seconds": 3}*/
            }
        });

        layui.form.on('select(showMarkSelect)', function (data) {
            let value = data.value;
            console.log(value);
            if (value == '-1') {
                vueObject.live2dPageQuery.showMark = null;
            } else if (value == '1') {
                vueObject.live2dPageQuery.showMark = 1;
            } else if (value == '0') {
                vueObject.live2dPageQuery.showMark = 0;
            }
            console.log(vueObject);
        })
    });
</script>
</html>
